<template>
    <div id='tmpl'>
        <div class="title">
            <ul v-bind="{style:'width:'+ulwidth+'px'}">
                <li @click="getimg(0)">全部</li>
                <li v-for="item in imglist" @click="getimg(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <div id="imgcom">
            <!--图片懒加载-->
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div class="imgmess">
                            <h4 v-text="item.title"></h4>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
    
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import common from '../../kikt/comment.js'
export default {
    data() {
        return {
            imglist: [],
            ulwidth: 320,
            list: []
        };
    },
    created() {
        this.getimglist();
        var all = 0;
        this.getimg(all);
    },
    methods: {
        //获取图片分类信息
        getimglist: function () {
            var url = common.apidomain + '/api/getimgcategory';
            this.$http.get(url).then(function (response) {
                var data = response.body;
                this.imglist = data.message
                var w = 84;
                var count = this.imglist.length + 1;
                this.ulwidth = w * count;
            })
        },
        //获取图片列表信息
        getimg: function (cateid) {
            var url = common.apidomain + '/api/getimages/' + cateid;
            this.$http.get(url).then(function (response) {
                var data = response.body;
                if (data.status != 0) {
                    Toast(data.message);
                    return
                }
                this.list = data.message;
            })
        }
    }
}
</script>
<style lang="css" scoped>
.title {
    width: 100%;
    /* max-width: 375px;*/
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.1);
}

.title ul {
    padding-left: 0px;
    width: 1000px;
    overflow: hidden;
    margin: 5px 0;
}

.title li {
    list-style: none;
    float: left;
    padding: 8px;
    cursor: pointer;
    color: #007ACC;
}


/*图片懒加载样式*/

image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
}

#imgcom ul {
    padding-left: 0px;
    margin: 5px 0;
}

#imgcom li {
    list-style: none;
    position: relative;
    cursor: pointer;
}

#imgcom li img {
    width: 100%;
    height: 300px;
}

#imgcom li .imgmess {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 5px;
    left: 0px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: clip;
}

.imgmess h4 {
    color: #D7BA7D;
}

.imgmess p {
    color: #BFF6F7;
    margin-bottom: 0px;
    font-size: 12px;
}

.active {
    background: greenyellow;
}
</style>